<!-- 页面：例如 pages/index/index.vue -->
<template>
	<view class="list">
		
		<view class="list-view">
			<view class="list-item" v-for="item in props.list" :key="item.id" @click="navigationUrl(item)">
				<!-- 左侧：图标 + 主标题 -->
				<view class="item-left">
					<image class="img" :src="item.photo" mode="aspectFill"></image>
				</view>
			
				<!-- 中间：主标题 + 详情 -->
				<view class="item-content">
					<text class="item-title text12">{{ item.title }}</text>
					<text class="item-desc text11">{{ item.location }}</text>
					<view class="item-link">
					<view class="item-desc">
									<text class="text11" style="margin-left: 5px;">{{ item.date }}</text>
						<wd-tag :type="item.status=='0'?'primary':'danger'" mark>
							
							<text class="text10">{{item.status=='0'?'报名':'已报名'}}</text>
							</wd-tag>
				
					</view>
					</view>
				</view>
			
			
				<!-- 右侧箭头 -->
				<!-- <wd-icon custom-class="item-arrow"	 name="arrow-right" size="19px"></wd-icon> -->
			
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		tabActivity
	} from "@/api/volunteer"


	import {
		ref,
		getCurrentInstance,
		onMounted,
		computed,
		watch,
		nextTick
	} from 'vue';
	import {
		useRouter
	} from 'uni-mini-router'

	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';

	
	const fontSizeStore = useFontSizeStore();
	const router = useRouter();


	const navigationUrl = (item) => {
		router.push({
			name: "volunteer_activityDetail",
			params: {
				id: item.id,
				type:'activeTab.value'
			}
		})
	}
	const props = defineProps(["list"])
</script>

<style scoped lang="less">
	@import '@/static/styles/colors.less';
	@import '@/static/styles/constants.less';

	@icon-color: #007aff; // 图标主题色
	@text-color: #333; // 文字颜色
	@item-height: 140rpx; // 增加高度以容纳详情
	@border-color: #e5e5e5;

	.item-link {
	
	}


	.list {
		padding: 0 20rpx;
	}
	
	.list-view{
		background-color: #fff;
		border-radius: 20rpx;
	}

	.list-item {
		display: flex;
		
		
		// align-items: center;
		// height: @item-height;
		// border-radius: @layout-border-radius-sm;
		border-bottom:1rpx solid #eee;
		// padding: 0rpx 20rpx;
		padding:25rpx;
		// margin-bottom: 20rpx;
		// background-color: #fff;
		// border: 1rpx solid @color-border-dark;
		position: relative;

		&:active {
			transform: scale(0.98);
			opacity: 0.8;
		}

		.item-left {
			flex: 0 0 180rpx;
			// text-align: center;
			height: 180rpx;
			margin-right: 24rpx;
			background-color: red;
			// padding: 20rpx 0;
			background-color: #fff;

			.img {
				width: 100%;
				height: 100%;
				background-color: #eee;;
			}

		}

		.item-content {
			flex: 1;
			overflow: hidden;
			    justify-content: space-between;
				display: flex;
			flex-direction: column;
		}

		.item-title {
			font-size: @h5-size;
			color: @color-text-dark;
			font-weight: 500;
			line-height: 1.4;
			display: flex;
			justify-content: space-between;

		}

		.item-desc {
			// font-size: @h6-size;
			color: @color-text-secondary;
			// line-height: 1.4;
			display: flex;
			overflow: hidden;
			    justify-content: space-between;
			// text-overflow: ellipsis;
			// white-space: nowrap;
			// margin-top: 4rpx;
		}

		.item-arrow {
			// font-size: 36rpx;
			color: @color-text-placeholder;
			margin-left: auto;
			transform: rotate(0deg);
			transition: transform 0.3s;
		}
	}
</style>